<template>
  <div class="SelTreeList">
    <a-tree
      ref="antdTree"
      :tree-data="dataList"
      :default-selected-keys="defaultSelectKey"
      :replace-fields="{
        children:'children',
        title: leftListKeyMap.label,
        key: leftListKeyMap.treeKey
      }"
      :selected-keys="defaultSelectKey"
      @select="treeSelect"
    >
      <a-icon slot="switcherIcon" type="down" />
    </a-tree>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    },

    defaultSelectKey: {
      type: Array,
      default: () => []
    },

    leftListKeyMap: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    treeSelect(selectedKeys, e) {
      const { selectedNodes } = e;
      let selectItem = null;
      // const tree = this.$refs.antdTree;
      if (selectedNodes.length) {
        selectItem = selectedNodes[0].data.props;
      }

      this.$emit('change', selectItem);
    }

  }
};
</script>

<style lang="scss" scoped>

.SelTreeList {
  $li-color: rgba(0,0,0,0.65);
  /deep/ .ant-tree {
    li {
      padding: 0;
      width: 100%;
      display: flex;
    }
  }
  /deep/ .ant-tree-treenode-switcher-close
   {
    display: flex;
    .ant-tree-node-content-wrapper {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      color: $li-color;
      font-weight: 600;
    }
  }

  /deep/ .ant-tree-node-content-wrapper-open {
    height: 44px;
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    color: $li-color;
    font-weight: 600;

  }

  /deep/ .ant-tree-child-tree-open {
    width: 100%;
  }

  /deep/ .ant-tree-treenode-switcher-open,
  /deep/ .ant-tree-node-content-wrapper-normal,
  /deep/ .ant-tree-child-tree
   {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }

  /deep/ .ant-tree-node-content-wrapper-normal {
    height: 44px;
  }

  /deep/ .ant-tree-switcher_close {
    position: relative;
    top: 8px;
  }

  /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #D1E9FF;

  }

  // /deep/ .ant-tree-treenode-selected {
  //   &::after {
  //     content: '';
  //     display: inline-block;
  //     height: 44px;
  //     width: 4px;
  //     background-color: #1492FF;
  //   }
  // }
}

</style>
